<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">推荐客户</x-header>
    <div class="main-header">
      <div class="weui-cells_form">
        <group gutter="0">
          <x-input placeholder="请输入客户姓名" class="input" is-type="china-name"  v-model="name">
            <div class="input-label" slot="label" >客户姓名</div>
          </x-input>
          <x-input placeholder="请输客户手机" class="input" is-type="china-mobile" :max="11"  v-model="mobile">
            <div class="input-label" slot="label">客户手机</div>
          </x-input>
          <x-input placeholder="请输入身份证号" class="input" type="number" :max="18" v-model="idCard">
            <div class="input-label" slot="label">身份证号</div>
          </x-input>
        </group>
      </div>
      <div class="check">
        <group class="group" title="渠道来源">
          <cell class="cell" v-for="(item,index) in channelList" :key="index" :title="item.title" >
            <img slot="icon" width="25" class="cell-icon" :src="item.choose === 1?'../../../static/img/on.png':'../../../static/img/off.png'" @click="choose(index)" />
          </cell>
        </group>
      </div>
      <div class="certificate">
        <div class="certificate-title">自带征信</div>
        <div class="certificate-tips">若有征信报告，请以图片形式上传。若无，则跳过。</div>
        <div class="certificate-img">

        </div>
      </div>
      <div class="confirm">
        <x-button class="confirm-button" @click.native="applyLoad">确认推荐</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addLoanApplication } from '@/api/home'

export default {
  name: 'recommend',
  data () {
    return {
      name: '',
      mobile: '',
      idCard: '',
      channelList: [
        {
          id:0,
          title: '寿险渠道',
          choose: 1
        },
        {
          id:1,
          title: '同行渠道',
          choose: 0
        },
        {
          id:2,
          title: '入围公司',
          choose: 0
        },
        {
          id:3,
          title: '其他渠道',
          choose: 0
        },
      ],
      current: 0
    }
  },
  methods: {
    choose(index) {
      let _index = parseInt(index)
      if (_index !== this.current) {
        this.current = _index
        this.channelList = this.channelList.map( (item, itemIndex) => {
          if (_index === itemIndex) {
            item.choose = 1
          } else {
            item.choose = 0
          }
          return item
        })
      }
    },
    applyLoad () {
      if (!this.name) {
        this.$vux.toast.show({
          text: '缺少姓名',
          type: 'cancel'
        })
        return
      } else if (!this.mobile) {
        this.$vux.toast.show({
          text: '缺少手机',
          type: 'cancel'
        })
        return
      } else if (!this.idCard) {
        this.$vux.toast.show({
          text: '缺少身份证',
          type: 'cancel'
        })
        return
      } else {
        addLoanApplication({ cid:this.globalData.cid, applyName:this.name, applyMobile: this.mobile, IDNumber: this.idCard, channelSrc: this.current + 1, picture:'' }).then(()=>{
          this.$vux.toast.show({
            text: '推荐成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.back(-1)
          }, 1500)
        })
      }
    }
  }
}
</script>

<style scoped>
.check {
  margin-top: 1rem;
  overflow: auto;
  color: #4A4A4A;
  background: #fff;
}
.certificate {
  margin-top: 1rem;
  padding: 1rem;
  background: #fff;
}
.certificate-title {
  color: #8D8D8D;
  padding-bottom: 0.4rem;
}
.certificate-tips {
  color: #5B5B5B;
  padding-bottom: 1rem;
}
.certificate-img {

}
.confirm {
  padding: 1rem;
}
.confirm-button {
  background: #F14E2C;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 3rem;
}
</style>
